<!--
 * @Description: 国家视图
 * @Author: tyq
 * @Date: 2021-08-04 15:50:18
 * @LastEditors: zy
 * @LastEditTime: 2021-08-31 10:38:21
-->
<template>
  <div id = "country">
    <div class="title">
      中国视图
    </div>
    <div class="main">
      <el-row style="height:850px">
          <el-col :span="6" class="chart">
            <div id="stackline" style="height:100%">
              
            </div>
          </el-col>
          <el-col :span="12" class="chart">
            <div id="map" style="height:100%"></div>
          </el-col>
          <el-col :span="6" class="chart">
            <div id="stackBar" style="height:100%"></div>
          </el-col>
      </el-row>
      <!-- <el-row style="height:600px">
          <el-col :span="6" class="chart">
            <div id="four"></div>
          </el-col>
          <el-col :span="6" class="chart">
            <div id="five"></div>
          </el-col>
          <el-col :span="12" class="chart">
            <div id="six"></div>
          </el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'
import {StackLineChart} from '@/assets/js/country/line.js'
import {Map} from '@/assets/js/country/map.js'
import {StackBarChart} from '@/assets/js/country/stackBar.js'
import {Four} from '@/assets/js/country/four.js'
import {Five} from '@/assets/js/country/five.js'
import {Six} from '@/assets/js/country/six.js'

export default {
  name: 'CountryView',
  data () {
    return {
      jsonMapUrl: '/static/data/China.json',
      chart: '',
      data: [],

      stackLineChart: '',
      stackLineData: [],

      stackbarChart: '',
      stackbarData: [],
    }
  },
  // 在vue中computed是计算属性，主要作用是把数据存储到内存中，
  // 减少不必要的请求，还可以利用computed给子组件的data赋值。
  // computed: { },
  mounted () {
    this.chart = new Map('map')
    this.getMapData()

    this.stackLineChart = new StackLineChart('stackline')
    this.getStackLineData()

    this.stackbarChart = new StackBarChart('stackBar')
    this.getStackBarData()
  },

  methods: {
    getStackLineData () {
          d3.csv('./static/data/stackBar.csv', csvdata => {
        return csvdata
      }).then((data) => {
        this.stackLineData = data.map(d => {
          // Items,RawCoal ,CrudeOil ,NaturalGas ,TotalApparentCO2
          return {
            date: d.date,
            RawCoal: +d.food,
            CrudeOil: +d.transportation,
            NaturalGas: +d.education
          }
        })
        // console.log(this.stackLineData)
        this.stackLineChart.data = this.stackLineData
        this.stackLineChart.itemsName = ['RawCoal', 'CrudeOil', 'NaturalGas']
        this.stackLineChart.title = '中国历年碳排放量组成'
        this.stackLineChart.xLabel = '年份/年'
        this.stackLineChart.yLabel = '排放量/ mt'
        this.stackLineChart.draw()
      })
    },

    getStackBarData() {
      d3.csv('./static/data/stackBar.csv', csvdata => {
        return csvdata
      }).then((data) => {
        this.stackbarData = data.map(d => {
          // console.log(d.date)
         return {
            date: d.date,
            food: +d.food,
            transportation: +d.transportation,
            education: +d.education
          }
        })
        console.log(111)
        console.log(this.stackbarData)
        this.stackbarChart.data = this.stackbarData
        this.stackbarChart.title = 'StackBar'
        this.stackbarChart.xLabel = '日期'
        this.stackbarChart.yLabel = ''
        this.stackbarChart.itemsName = ['food', 'transportation', 'education']
        this.stackbarChart.draw()
      })
    },
    
    getMapData () {
      // this.$http.get(this.jsonUrl).then(data => {
        d3.json('/static/data/China.json').then(data => {
        // data = data.data
        // console.log(data)
        this.chart.jsonData = data 
        // console.log(this.chart.jsonData)
        this.chart.draw()
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  background-color: #82dbf8;
  height: 50px;
  font-size: 40px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 600;
}
.main {
  background-color: #f6fbfd;
}
.chart {
  border-style: solid;
  height: 100%;
}
</style>